<template>
  <div class="information-container" id="info">
    <el-row>
      <el-col>
        <h1><b>WEL</b>COME</h1>
        <p>对编程保持好奇心、目的和激情，始终如一</p>
      </el-col>
    </el-row>
    <el-row class="info-bg">
      <h1 class="wow animate__animated animate__fadeInTopRight">个人信息</h1>
      <p class="wow animate__animated animate__fadeInLeft">
        对编程保持好奇心、目的和激情，始终如一
      </p>
    </el-row>
    <el-row class="detail">
      <el-card shadow="always">
        <el-col :span="12"
          ><el-descriptions title="基本信息">
            <el-descriptions-item label="姓名">杨勇辉</el-descriptions-item>
            <el-descriptions-item label="出生年月"
              >1999.05</el-descriptions-item
            >
            <el-descriptions-item label="毕业院校">
              <el-tag size="small">江西财经大学</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="专业">软件工程</el-descriptions-item>
            <el-descriptions-item label="学历">本科</el-descriptions-item>
            <el-descriptions-item label="现居地">江西抚州</el-descriptions-item>
          </el-descriptions></el-col
        >
        <el-col class="contact-style" :span="12">
          <div class="icon" v-for="item in iconList" :key="item.id">
            <img :src="item.icon" alt="" />
            <p>{{ item.info }}</p>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-row class="self-evaluation-bg">
      <div class="self-evaluation">
        <el-col :span="12" class="wow animate__animated animate__backInLeft">
          <h1><b>自我</b>评价</h1>
          <p>对编程保持好奇心、目的和激情，始终如一。</p>
          <p>本人性格稳重，待人真诚，有良好的学习能力。</p>
          <p>
            工作积极认真，细心负责，熟练运用各类编程软件，善于在工作中提出问题、发现问题、解决问题，
            有较强的分析能力.。
          </p>
          <p>
            对工作具有高度的热情和顽强拼搏的精神，努力在为企业创造价值的同时不断提高自身能力。
          </p>
        </el-col>
        <el-col :span="12" class="wow animate__animated animate__backInRight">
          <img src="../assets/images/self.png" alt=""
        /></el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { WOW } from "wowjs";
export default {
  data() {
    return {
      iconList: [
        {
          id: 1,
          icon: require("../assets/images/qq.png"),
          info: "173597916",
        },
        {
          id: 2,
          icon: require("../assets/images/email.png"),
          info: "173597916@qq.com",
        },
        {
          id: 3,
          icon: require("../assets/images/tel.png"),
          info: "13879423370",
        },
      ],
    };
  },
  mounted() {
    new WOW().init();
  },
};
</script>

<style lang="less" scoped>
.information-container {
  h1 {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    color: #444444;
    b {
      display: inline-block;
      font-weight: normal;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid #ffad2b;
    }
  }
  p {
    text-align: center;
    font-size: 14px;
    color: #666666;
  }
  .info-bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 360px;
    background: url("../assets/images/info-bg.jpg");
    h1 {
      font-weight: normal;
      font-size: 35px;
      color: #ffffff;
    }
    p {
      font-weight: normal;
      font-size: 26px;
      color: #ffffff;
    }
  }
  .detail {
    width: 1200px;
    height: 0;
    margin: 0 auto;
    position: relative;
    top: -50px;
    .el-card {
      border-radius: 16px;
      .el-descriptions {
        margin: 20px;
        padding: 0 10px;
        border-right: 1px solid #efefef;
      }
      .contact-style {
        display: flex;
        justify-content: space-around;
        .icon {
          margin-top: 40px;
          text-align: center;
        }
      }
    }
  }
  .self-evaluation-bg {
    height: 715px;
    background: url("../assets/images/self-evaluation-bg.jpg");
    z-index: -999;
    .self-evaluation {
      width: 1200px;
      margin: 200px auto;
      h1 {
        text-align: start;
        font-size: 24px;
        font-weight: normal;
        color: #444444;
        b {
          display: inline-block;
          font-weight: normal;
          height: 40px;
          line-height: 40px;
          border-bottom: 2px solid #ffad2b;
        }
      }
      p {
        margin: 20px;
        text-align: start;
        font-size: 18px;
        line-height: 36px;
        color: #666666;
      }
    }
  }
}
</style>